import Base from '@/components/Base';
import { View } from '@/components/KayUI';
import { Layout, Menu } from 'antd';
import {
  Button,
  Card,
  Row,
  Col,
  Typography,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton } from '@/components/KayUI';
import { CheckOutlined } from '@ant-design/icons';
import ExamItem from '../components/ExamItem';
import styles from './index.less';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

interface State {
  selectedKeys: string[];
  examData?: any[];
  submited?: boolean;
}

export default class Index extends Base<any, State> {
  public state: State = {
    selectedKeys: [],
  };
  private menuList = [
    {
      title: '市政',
      children: [
        {
          title: '2017真题',
          fileName: 'real2017',
        },
        {
          title: '2018真题',
          fileName: 'real2018',
        },
        {
          title: '2019真题',
          fileName: 'real2019',
        },
        {
          title: '2020真题',
          fileName: 'real2020',
        },
        {
          title: '2021真题（一）',
          fileName: 'real2021-05-23',
        },
        {
          title: '2021真题（二）',
          fileName: 'real2021-05-30',
        },
        {
          title: '2022真题',
          fileName: 'real2022',
        },
        {
          title: '2022冲刺（一）',
          fileName: 'spurt2022-1',
        },
        {
          title: '2022冲刺（二）',
          fileName: 'spurt2022-2',
        },
        {
          title: '2022冲刺（三）',
          fileName: 'spurt2022-3',
        },
        {
          title: '2022模拟（一）',
          fileName: 'simulate2022-1',
        },
        {
          title: '2022模拟（二）',
          fileName: 'simulate2022-2',
        },
        {
          title: '2022模拟（三）',
          fileName: 'simulate2022-3',
        },
        {
          title: '2022强化（一）',
          fileName: 'strengthen2022-1',
        },
        {
          title: '2022强化（二）',
          fileName: 'strengthen2022-2',
        },
        {
          title: '2022强化（三）',
          fileName: 'strengthen2022-3',
        },
      ],
    },
    {
      title: '管理',
      children: [],
    },
    {
      title: '法规',
      children: [],
    },
  ];

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
  }

  public render() {
    const { selectedKeys, examData, submited } = this.state;
    return (
      <div>
        <Layout>
          <Sider
            style={{
              overflow: 'auto',
              height: '100vh',
              position: 'fixed',
              left: 0,
              top: 0,
            }}
          >
            <Menu
              mode="inline"
              defaultOpenKeys={this.rootMenuKeys}
              onOpenChange={this.onOpenChange}
              selectedKeys={selectedKeys}
              style={{ height: '100%', overflowY: 'auto' }}
            >
              {this.menuList.map((menu) => {
                if (menu.children) {
                  return (
                    <SubMenu key={menu.title} title={<span>{menu.title}</span>}>
                      {menu.children.map((res) => (
                        <Menu.Item
                          key={res.title}
                          onClick={this.handleRoute.bind(null, res)}
                        >
                          {res.title}
                        </Menu.Item>
                      ))}
                    </SubMenu>
                  );
                } else {
                  return (
                    <Menu.Item
                      key={menu.title}
                      onClick={this.handleRoute.bind(null, menu)}
                    >
                      {menu.title}
                    </Menu.Item>
                  );
                }
              })}
            </Menu>
          </Sider>
          <Layout style={{ height: '100vh', marginLeft: 200 }}>
            <Row
              style={{
                alignItems: 'center',
                background: '#fff',
                padding: '12px 24px',
              }}
            >
              <h3 style={{ margin: 0, flex: 1 }}>
                {selectedKeys[0] || 'Exams'}
              </h3>
              <Button
                type="primary"
                onClick={this.handleSubmit}
                icon={submited ? <CheckOutlined /> : null}
              >
                提交
              </Button>
            </Row>
            <Content
              style={{ flex: 1, padding: '24px 16px', overflow: 'auto' }}
            >
              {examData &&
                examData.map((e, ind) => (
                  <ExamItem
                    key={selectedKeys[0] + ind}
                    data={e}
                    submited={submited}
                    onOption={this.handleOption.bind(this, ind)}
                  ></ExamItem>
                ))}
            </Content>
            {submited && (
              <Row style={{ flexWrap: 'nowrap', paddingTop: '10px' }}>
                <Col className={styles.listCol}>
                  <h5>
                    单选题：
                    <span className={styles.gray}>（每题1分，共20题）</span>
                  </h5>
                  <Row className={styles.listUl}>
                    {examData &&
                      examData.map(
                        (e, ind) =>
                          e.questionType == '单选题' && (
                            <View
                              className={this.cx(
                                styles.listLi,
                                e.result
                                  ? {
                                      [styles.correct]: e.result[0] == e.answer,
                                      [styles.wrong]: e.result[0] != e.answer,
                                    }
                                  : '',
                              )}
                              key={selectedKeys[0] + 'res1' + ind}
                            >
                              {ind + 1}
                            </View>
                          ),
                      )}
                  </Row>
                </Col>
                <Col className={styles.listCol}>
                  <h5>
                    多选题：
                    <span className={styles.gray}>（每题2分，共10题）</span>
                  </h5>
                  <Row className={styles.listUl}>
                    {examData &&
                      examData.map(
                        (e, ind) =>
                          e.questionType == '多选题' && (
                            <View
                              className={this.cx(
                                styles.listLi,
                                e.result
                                  ? {
                                      [styles.correct]:
                                        e.result.sort().join('') == e.answer,
                                      [styles.wrong]:
                                        e.result.sort().join('') != e.answer,
                                    }
                                  : '',
                              )}
                              key={selectedKeys[0] + 'res2' + ind}
                            >
                              {ind + 1}
                            </View>
                          ),
                      )}
                  </Row>
                </Col>
                <Col className={styles.listCol}>
                  <h5>
                    案例题：
                    <span className={styles.gray}>（每题20分，共4题）</span>
                  </h5>
                  <Row className={styles.listUl}>
                    {examData &&
                      examData.map(
                        (e, ind) =>
                          e.questionType == '问答题' && (
                            <View
                              className={this.cx(styles.listLi, {})}
                              key={selectedKeys[0] + 'res3' + ind}
                            >
                              {ind + 1}
                            </View>
                          ),
                      )}
                  </Row>
                </Col>
              </Row>
            )}
          </Layout>
        </Layout>
      </div>
    );
  }

  private get rootMenuKeys() {
    return this.menuList.map((e) => {
      return e.title;
    });
  }
  private onOpenChange = (keys: any) => {
    // const { openKeys } = this.state
    // const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
    // if (this.rootMenuKeys.indexOf(latestOpenKey) === -1) {
    //   this.setState({ openKeys: keys });
    // } else {
    //   this.setState({
    //     openKeys: latestOpenKey ? [latestOpenKey] : [],
    //   });
    // }
  };

  private handleRoute = (obj: any) => {
    // this.navigator.push(obj.route)
    this.setState({
      selectedKeys: [obj.title],
    });
    obj.fileName && this.openDoc(obj.fileName);
  };

  private handleOption = (ind, res) => {
    let { examData } = this.state;
    if (examData) {
      examData[ind].result = res;
      this.setState({
        examData: [...examData],
      });
    }
  };

  private openDoc = (name) => {
    let dt = require('@/static/exams/' + name + '.json');
    console.log('examm::', dt);
    this.setState({
      examData: dt,
      submited: false,
    });
  };

  private handleSubmit = () => {
    this.setState({
      submited: true,
    });
  };
}
